<template>
  <div>
    <Header :isGoBack="false">
      <!-- <template v-slot:left>
        <span>同步课文 <i class="el-icon-arrow-right"></i> 学习中心</span>
      </template> -->
      <template v-slot:right>
        <el-dropdown @command="handleCommand">
          <span class="speed">当前语速&nbsp; {{ speed }}x&nbsp;<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="0.5"> 0.5x</el-dropdown-item>
            <el-dropdown-item :command="0.75">0.75x</el-dropdown-item>
            <el-dropdown-item command="1.0">1.0x</el-dropdown-item>
            <el-dropdown-item :command="1.25">1.25x</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="study-center text-study-center w1200">
      <div class="class-name flex-space-be">
        <div class="mr50 pl20">
          <span class="book-name mr30">
            {{
              checkedBookData.edition_name + "-" + checkedBookData.grade_name
            }}
          </span>
          <el-dropdown @command="checkBook">
            <span class="el-dropdown-link">
              换课程
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in classData" :key="item.book_id + '' + index" :command="item">
                {{ item.edition_name }}-{{ item.grade_name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="class-name-right pr20">
          <div class="progress-box">
            <div class="click" @click="goExerciseReadReview(null, readReviewNum)">
              <i class="el-icon-microphone"></i> 跟读训练
              <span class="remind-text">({{ readReviewNum }})</span>
            </div>
            <div class="click" @click="goExerciseReciteReview(null, reciteReviewNum)">
              <i class="el-icon-notebook-2"></i> 背诵训练
              <span class="remind-text">({{ reciteReviewNum }})</span>
            </div>
          </div>
          <div class="btn-box" @click="goReview">
            <el-button class="button button-bg-primary" :disabled="readReviewNum + reciteReviewNum <= 0">
              一键智能复习
            </el-button>
          </div>
        </div>
      </div>
      <div class="study-conatiner flex-space-be">
        <div class="intelligent-study study-item mr20" id="step4">
          <div class="intelligent-study-header study-item-header flex-space-be">
            <span>智能学习区</span>
            <span>
              <span class="header-right click" @click="goTextBook">课文本</span>
            </span>
          </div>

          <div class="intelligent-study-container flex-space-be">
            <div class="
                intelligent-study-left
                mr20
                study-cotainer
                intelligent-study-item
              " id="step5">
              <div class="intelligent-study-unit">
                <div class="
                    study-cotainer-title
                    intelligent-item-header
                    flex-space-be
                  ">
                  <span class="title">选择单元</span>
                  <!-- <span class="title pr25">进度</span> -->
                  <el-popover placement="bottom-start" trigger="hover">
                    <div class="study-schedule-info">
                      <p>
                        打开进度后，单元名称后面的图标便是各个模块的学习状态，如图所示：
                      </p>
                      <p class="study-schedule">
                        <span class="schedule-icon study-nolearn"></span>
                        <span class="schedule-text ml5 mr10">未学</span>
                        <span class="schedule-icon study-learning my_progress">
                          <el-progress :show-text="false" type="circle" :percentage="66" :width="12" :height="12"
                            :stroke-width="2" :color="$store.getters.color_main"></el-progress>
                        </span>
                        <span class="schedule-text ml5 mr10">正在学</span>
                        <span class="schedule-icon study-pass"></span>
                        <span class="schedule-text ml5 mr10">通过</span>
                        <span class="schedule-icon study-nopass"></span>
                        <span class="schedule-text ml5 mr10">未通过</span>
                      </p>
                    </div>
                    <div slot="reference">
                      进度
                      <img src="@/assets/img/icon/help-normal.png" alt="" />
                    </div>
                  </el-popover>
                </div>
                <div class="study-unit">
                  <div class="scorll-box">
                    <ul class="study-unit-list">
                      <li v-for="unit in unitList" :key="unit.unit_id" :class="checkedUnit == unit.unit_id ? 'checked-unit' : ''
                        " @click="checkUnit(unit)">
                        <el-tooltip effect="dark" :content="unit.title" placement="top" :disabled="unit.title.length <= 9"
                          :open-delay="500">
                          <h5>
                            {{ unit.title }}
                          </h5>
                        </el-tooltip>

                        <div class="study-schedule">
                          <span v-if="unit.unitData[1]" class="schedule-icon my_progress"
                            :class="statusClass[unit.unitData[1].status]">
                            <el-progress v-if="unit.unitData[1].status == 1" :show-text="false" type="circle"
                              :percentage="unit.unitData[1].progressNum" :color="$store.getters.color_main" :width="12"
                              :height="12" :stroke-width="2"></el-progress></span>
                          <span v-if="unit.unitData[2]" class="schedule-icon my_progress"
                            :class="statusClass[unit.unitData[2].status]">
                            <el-progress v-if="unit.unitData[2].status == 1" :show-text="false" type="circle"
                              :percentage="unit.unitData[2].progressNum" :color="$store.getters.color_main" :width="12"
                              :height="12" :stroke-width="2"></el-progress></span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="
                intelligent-study-right
                study-cotainer
                intelligent-study-item
              " id="step6">
              <div class="study-cotainer-title intelligent-item-header">
                选择模块
                <img class="ml20 click" @click="dialogModeInfo = true" slot="reference"
                  src="@/assets/img/icon/help-normal.png" alt="" />
              </div>
              <div class="intelligent-right-conatin">
                <div class="text-container">
                  <div class="text-study-item text-study-sentences">
                    <h4 class="text-study-item-title">单句跟读</h4>
                    <div class="text-study-item-container">
                      <div class="text-study-item-left">
                        <div class="item-progress">
                          <el-progress type="circle" :percentage="unitModeData[1] ? unitModeData[1].progressNum : 0
                            " color="#ff9414" class="green-text" :width="120"></el-progress>
                        </div>
                        <div class="item-left-btn click" @click="goExerciseRead">
                          <span> 跟读训练 </span>
                          <i class="font_family icon-1202youjiantou"></i>
                        </div>
                      </div>
                      <div class="text-study-item-right">
                        <div class="item-right-btn click" @click="
                          goExerciseReadReview(checkedUnit, readUnitReviewNum)
                          ">
                          <span>智能复习</span>
                          <span class="reminder-text">
                            {{ readUnitReviewNum }}
                            个
                          </span>
                          <span class="item-right-btn-icon">
                            <i class="font_family icon-1202youjiantou"></i>
                          </span>
                        </div>
                        <div class="item-right-btn" :class="$store.getters.isTeacher ? 'not-click' : 'click'
                          " @click="gotextTestPaper(1)">
                          <span>闯关测试</span>
                          <span class="reminder-text">
                            {{
                              unitModeData[1] &&
                              (unitModeData[1].nearScore ||
                                unitModeData[1].nearScore == 0)
                              ? unitModeData[1].nearScore + " 分"
                              : "未闯关"
                            }}
                          </span>
                          <span class="item-right-btn-icon">
                            <i class="font_family icon-1202youjiantou"></i>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="text-study-item text-study-full">
                    <h4 class="text-study-item-title">全文背诵</h4>
                    <div class="text-study-item-container">
                      <div class="text-study-item-left">
                        <div class="item-progress">
                          <el-progress type="circle" :percentage="unitModeData[2] ? unitModeData[2].progressNum : 0
                              " color="#188aff" class="green-text" :width="120"></el-progress>
                        </div>
                        <div class="item-left-btn click" @click="goExerciseRecite">
                          <span> 背诵训练 </span>
                          <i class="font_family icon-1202youjiantou"></i>
                        </div>
                      </div>
                      <div class="text-study-item-right">
                        <div class="item-right-btn click" @click="
                          goExerciseReciteReview(
                            checkedUnit,
                            reciteUnitReviewNum
                          )
                          ">
                          <span>智能复习</span>
                          <span class="reminder-text">
                            {{ reciteUnitReviewNum }}
                            个
                          </span>
                          <span class="item-right-btn-icon">
                            <i class="font_family icon-1202youjiantou"></i>
                          </span>
                        </div>
                        <div class="item-right-btn" @click="gotextTestPaper(2)" :class="$store.getters.isTeacher ? 'not-click' : 'click'
                          ">
                          <span>闯关测试</span>
                          <span class="reminder-text">
                            {{
                              unitModeData[2] &&
                              (unitModeData[2].nearScore ||
                                unitModeData[2].nearScore == 0)
                              ? unitModeData[2].nearScore + " 分"
                              : "未闯关"
                            }}
                          </span>
                          <span class="item-right-btn-icon">
                            <i class="font_family icon-1202youjiantou"></i>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="模块说明" :visible.sync="dialogModeInfo">
      <div class="mode-list-info">
        <div class="mode-item">
          <h4>
            <span class="number">1</span>
            <span class="title">单句跟读</span>
            <el-rate disabled :value="4"></el-rate>
          </h4>
          <p>
            AI老师领读，学生再次跟读，系统通过发音判定成绩。通过单句跟读训练，以达到快速提高英语发音能力。
          </p>
        </div>
        <div class="mode-item">
          <h4>
            <span class="number">2</span>
            <span class="title">全文背诵</span>
            <el-rate disabled :value="5"></el-rate>
          </h4>
          <p>
            通过看中文句义背诵英文课文的训练，以达到快速提高英语的翻译能力及口语能力。
          </p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { getClassData } from "@/api/index";
import { getUnitList, getTextReviewNum } from "@/api/text";
/**
 *  typeObj: {
      0: "记忆",
      1: "英译汉",
      2: "汉译英",
      3: "听力理解",
      4: "听写",
      5: "默写",
    },
 */
export default {
  data() {
    return {
      speed: "1.0",
      driver: null,
      checkedUnit: null,
      unitList: [],
      statusClass: {
        0: "study-nolearn",
        1: "study-learning",
        2: "study-pass",
        3: "study-nopass",
      },
      dialogModeInfo: false,
      checkedBookData: {},
      classData: [],
      reviewData: [],
      checkTypeDialog: false,
      questionType: [],
      reciteReviewNum: 0,
      readReviewNum: 0,
      readUnitReviewNum: 0,
      reciteUnitReviewNum: 0,
    };
  },
  computed: {
    unitModeData() {
      let unit = this.unitList.filter((item) => {
        return item.unit_id == this.checkedUnit;
      });
      if (unit && unit.length <= 0) return [];
      return unit[0].unitData;
    },
  },
  methods: {
    handleCommand(command) {
      this.speed = command
      localStorage.setItem("SPEED", command)
    },
    // 换课程
    async checkBook(data) {
      if (
        this.checkedBookData &&
        data.book_id != this.checkedBookData.book_id
      ) {
        await this.$store.dispatch("SetTimeEnglish", 1);
      }
      this.checkedBookData = data;
      localStorage.setItem("bookData", JSON.stringify(this.checkedBookData));
      this.getUnitList();
      // this.getTextReviewNum();
    },
    getUnitList() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };

      getUnitList(params).then((res) => {
        if (res.code == 200 && res.data) {
          res.data.forEach((item) => {
            let data = {};
            item.word_total_vo_list.forEach((sentenceData) => {
              let objData = {
                category: sentenceData.category,
                studyNum: sentenceData ? sentenceData.number : 0,
                totalNum: sentenceData ? sentenceData.word_sum : 0,
                status: sentenceData ? sentenceData.status : 0,
                reviewNum: sentenceData ? sentenceData.not_number : 0,
                // nearScore: scoreData.length > 0 ? scoreData[0].score : null,
              };
              objData.progressNum =
                objData.totalNum <= 0
                  ? 0
                  : objData.studyNum / objData.totalNum > 1
                    ? 100
                    : parseInt((objData.studyNum / objData.totalNum) * 100);

              data[sentenceData.category] = objData;
            });
            item.unitData = data;
            item.category_vo_list.forEach((score) => {
              if (item.unitData[score.category]) {
                item.unitData[score.category].nearScore = score.score;
              }
            });
          });

          this.unitList = res.data;
          let index = this.unitList.findIndex((item) => {
            return item.unit_id == this.checkedUnit;
          });
          if (index == -1 && res.data.length > 0) {
            // this.checkedUnit = res.data[0].unit_id;
            this.checkUnit(res.data[0]);
          } else {
            this.checkUnit(res.data[index]);
          }
        } else {
          this.unitList = [];
          this.reciteReviewNum = 0;
          this.readReviewNum = 0;
          this.readUnitReviewNum = 0;
          this.reciteUnitReviewNum = 0;
        }
      });
    },

    goTextBook() {
      this.$router.push({
        name: "textBook",
        query: {
          unitId: this.checkedUnit,
        },
      });
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    goExerciseRead() {
      this.$router.push({
        name: "exerciseRead",
        query: {
          unitId: this.checkedUnit,
        },
      });
    },
    goExerciseReadReview(unitId, number) {
      if (number > 0) {
        this.$router.push({
          name: "exerciseRead",
          query: {
            unitId: unitId ? unitId : null,
            isReview: 1,
          },
        });
      } else {
        this.$alert("还没有到最优的复习时间，稍后再来吧", "提示");
      }
    },
    //
    goExerciseRecite() {
      this.$router.push({
        name: "exerciseRecite",
        query: {
          unitId: this.checkedUnit,
        },
      });
    },
    goExerciseReciteReview(unitId, number) {
      if (number > 0) {
        this.$router.push({
          name: "exerciseRecite",
          query: {
            unitId: unitId ? unitId : null,
            isReview: 1,
          },
        });
      } else {
        this.$alert("还没有到最优的复习时间，稍后再来吧", "提示");
      }
    },
    goReview() {
      if (this.readReviewNum > 0) {
        this.goExerciseReadReview(null, this.readReviewNum);
        return;
      }
      if (this.reciteReviewNum > 0) {
        this.goExerciseReciteReview(null, this.reciteReviewNum);
        return;
      }
    },
    gotextTestPaper(type) {
      if (this.$store.getters.isTeacher) {
        return;
      }
      this.$router.push({
        name: "textTestPaper",
        query: {
          type,
          unitId: this.checkedUnit,
        },
      });
    },
    formatProgress(data) {
      return function () {
        if (data.status > 2 && (data.nearScore || data.nearScore == 0)) {
          return data.nearScore + "分";
        } else if (data.totalNum) {
          return "" + data.studyNum + "/" + data.totalNum;
        } else {
          return "0 / 0";
        }
      };
    },
    getClassData() {
      getClassData().then((res) => {
        if (res.code == 200 && res.data) {
          res.data = res.data.filter((item) => {
            return item.status == 0;
          });
          this.classData = res.data.filter((item) => {
            return (
              item.permission == 0 &&
              item.list &&
              item.list[0] &&
              item.list[0].text_state
            );
          });
          if (this.classData) {
            let index = this.classData.findIndex((item) => {
              return item.book_id == this.checkedBookData.book_id;
            });
            if (index == -1) {
              this.goStudyIndex();
            } else {
              this.checkBook(this.classData[index]);
            }
          }
        }
      });
    },

    checkUnit(data) {
      this.checkedUnit = data.unit_id;
      this.getUnitReviewNum();
      this.getTextReviewNum();
      localStorage.setItem("checkedUnit", JSON.stringify(data));
    },
    getTextReviewNum() {
      let params = {
        bookId: this.checkedBookData.book_id,
        unitId: null,
      };
      let data = {
        book_id: this.checkedBookData.book_id,
        unit_id: null,
      };
      getTextReviewNum(params, data).then((res) => {
        if (res.code == 200 && res.data) {
          res.data.forEach((item) => {
            if (item.category == 1) {
              this.readReviewNum = item.num;
            }
            if (item.category == 2) {
              this.reciteReviewNum = item.num;
            }
          });
        } else {
          this.readReviewNum = 0;
          this.reciteReviewNum = 0;
        }
      });
    },
    getUnitReviewNum() {
      // getTextReviewNum
      let params = {
        bookId: this.checkedBookData.book_id,
        unitId: this.checkedUnit,
      };
      let data = {
        book_id: this.checkedBookData.book_id,
        unit_id: this.checkedUnit,
      };
      getTextReviewNum(params, data).then((res) => {
        if (res.code == 200 && res.data) {
          res.data.forEach((item) => {
            if (item.category == 1) {
              this.readUnitReviewNum = item.num;
            }
            if (item.category == 2) {
              this.reciteUnitReviewNum = item.num;
            }
          });
        } else {
          this.readUnitReviewNum = 0;
          this.reciteUnitReviewNum = 0;
        }
      });
    },
  },
  created() {
    this.checkedUnit = localStorage.getItem("checkedUnit")
      ? JSON.parse(localStorage.getItem("checkedUnit")).unit_id
      : null;
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getClassData();
  },
  beforeDestroy() {
    if (this.driver) {
      this.driver.reset();
    }
  },
  mounted() {
    if (localStorage.getItem("SPEED")) {
      this.speed = localStorage.getItem("SPEED")
    }
  },
  components: { Header },
  watch: {},
};
</script>

<style lang="scss" scoped>
.study-schedule {
  /deep/.el-progress-circle {
    width: 0.0625rem !important;
    height: 0.0625rem !important;
  }
}
.text-study-item-left {
  .item-progress {
    /deep/.el-progress-circle {
      width: 0.625rem !important;
      height: 0.625rem !important;
    }
    /deep/.el-progress__text{
      font-size: 0.083333rem !important;
    }
  }
}
.speed {
  color: #f7f7f7;
  display: inline-block;
  height: 40px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 40px;
  padding: 0 24px;
  font-size: 14px;
}

.speed:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #f7f7f7;
}
</style>